<%--
  Created by IntelliJ IDEA.
  User: 33536
  Date: 2022/5/19
  Time: 11:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/ajaxForm.js"></script>
    <script>
        layui.use(['tree', 'util','form','layer','table','jquery'], function(){
            tree = layui.tree;
            var util = layui.util;
            var form = layui.form;
            var layer=layui.layer;
            var $ = layui.jquery;
            var table = layui.table;
            <%--$.ajax({--%>
            <%--    url: '${pageContext.request.contextPath}/juris/bumen',--%>
            <%--    dataType: 'json',--%>
            <%--    success: function(res) {--%>
            <%--    }--%>

            <%--});--%>
            var data = ${data};
            //仅节点左侧图标控制收缩
            tree.render({
                elem: '#test2'
                , data: data
                , onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
                , click: function(obj){
                    var data = obj.data;  //获取当前点击的节点数据 获取班级id
                    var depid=data.id;
                    layer.open({
                        type:2,
                        fix:false,
                        maxmin:true,
                        offset:'5px',
                        shadeClose:true,
                        shade:0.4,
                        area:['550px','350px'],
                        title:"编辑部门",
                        content:'${pageContext.request.contextPath}/juris/toupdatebumen/'+depid
                    })
                },
            });
            //监听form表单提交 刷新按钮
            form.on('submit(quanbu-btn)',function (d) {
                location.reload("demo");//重新加载父页面表格
            });
            //监听添加按钮
            $("#add-btn").click(function () {
                layer.open({
                    type:2,
                    fix:false,
                    maxmin:true,
                    offset:'5px',
                    shadeClose:true,
                    shade:0.4,
                    area:['550px','350px'],
                    title:"新增部门",
                    content:'${pageContext.request.contextPath}/juris/toaddbumenn'
                });
            });

            //监听from表单提交
            form.on('submit(search-btn)',function (d) {
                var depid = $("#depid").val();
                var depName = $("#depName").val();
                var parentId = $("#parentId").val();
                var chairman = $("#chairman").val();
                var personnel = $("#personnel").val();
                // alert("  "+depid+":"+depName+"  "+":"+parentId+":"+chairman+":"+personnel);
                table.reload('demo',{
                    page:{curr:1},
                    where:{ //条件
                        depid:depid,
                        depName:depName,
                        parentId:parentId,
                        chairman:chairman,
                        personnel:personnel,
                    }
                })
            });
            table.on('tool(demo)',function (res) {
                var row = res.data; //获取当前行的数据
                var event = res.event; //获取是哪个按钮
                var depid = row.depid;
                // alert(event+" "+depid);
                if (event=='del'){
                    //把id传到后台去删除
                    // alert(row.empId); 弹出要删除的ID
                    layer.confirm('是否删除该专业？',{
                        btn:['确定','取消']
                    },function () {//确定的回调函数
                        // alert(row.empId);测试是否进入
                        $.post("${pageContext.request.contextPath}/juris/delbumen",{depid:depid},function (data) {
                            //重新加载table
                            table.reload('demo',{
                                url:"${pageContext.request.contextPath}/juris/bumen"
                            });
                        },"json");
                    });
                }else  if (event=='edit'){
                    layer.open({
                        type:2,
                        fix:false,
                        maxmin:true,
                        offset:'5px',
                        shadeClose:true,
                        shade:0.4,
                        area:['550px','350px'],
                        title:"编辑专业",
                        content:'${pageContext.request.contextPath}/juris/toupdatebumen/'+depid
                    })
                }
            });
            form.verify({
                num_sz:[
                    /(^$)|^\d+$/,
                    '只能填写数字'
                ],
            });
        });
    </script>
<body>

<form class="layui-form" action="${pageContext.request.contextPath}">
    <div class="layui-inline">部门编号:</div>
    <div class="layui-inline" style="width: 100px">
        <input type="text" id="depid" name="depid" class="layui-input" lay-verify="num_sz"/>
    </div>
    <div class="layui-inline">部门名称:</div>
    <div class="layui-inline">
        <input type="text" id="depName" name="depName" class="layui-input" />
    </div>
    <div class="layui-inline">上级部门:</div>
    <div class="layui-input-inline" style="width: 130px">
        <select name="parentId" lay-filter="parentId" id="parentId">
            <option value="">选择上级部门：</option>
            <c:forEach items="${lisdep}" var="dept">
                <option value="${dept.depid}">${dept.depName}</option>
            </c:forEach>
        </select>
    </div>
    <div class="layui-inline">部门负责人:</div>
    <div class="layui-inline" style="width: 140px">
        <select name="chairman" lay-filter="chairman" id="chairman">
            <option value="">选择部门负责人：</option>
            <c:forEach items="${lisemp}" var="e">
                <option value="${e.empId}">${e.empName}</option>
            </c:forEach>
        </select>
    </div>
    <div class="layui-inline">人事/教职:</div>
    <div class="layui-inline" style="width: 100px">
        <select name="personnel" lay-filter="personnel" id="personnel">
            <option value="">-未选择-</option>
            <option value="1">-人事-</option>
            <option value="2">-教职-</option>
        </select>
    </div>
    <a class="layui-btn" lay-filter="search-btn" lay-submit lay-size="sm" >搜索<i class="layui-icon">&#xe615;</i> </a>
    <a class="layui-btn" lay-filter="quanbu-btn" lay-submit="" lay-size="sm">刷新 <i class="layui-icon">&#xe669;</i></a>
    <button id="add-btn" type="button" class="layui-btn layui-btn-normal" style="position: absolute; right: 10px;">添加 <i class="layui-icon">&#xe654;</i></button>
</form>
<div class="layui-row layui-col-space15">
    <div class="layui-col-md3">
        <div class="layui-panel" style="margin-top: 6px">
            <fieldset class="layui-elem-field layui-field-title" >
                <legend>左键单击进入修改页</legend>
            </fieldset>
            <div id="test2" class="demo-tree"></div>
        </div>
    </div>
    <div class="layui-col-md9">
        <div class="layui-panel" style="margin-top: 6px">
        <table class="layui-table" iid="demo" lay-filter="demo" lay-size="sm"
               lay-data="{url:'${pageContext.request.contextPath}/juris/bumen',page:true,id:'demo'}">
            <thead>
            <tr>
                <th lay-data="{field:'depid',sort:true ,align:'center',style:'height:50px;'}">部门编号</th>
                <th lay-data="{field:'depName',sort:true,align:'center'}">部门名称</th>
                <th lay-data="{field:'deepName',sort:true,align:'center'}">上级部门</th>
                <th lay-data="{field:'empName',sort:true,align:'center'}">部门负责人</th>
                <th lay-data="{field:'personnel',sort:true,align:'center',templet:function (d) {
                            var zid=d.personnel;//取出每一个数据
                                if(zid==1){
                                    return '人事'
                                }else if(zid==2){
                                    return '教职'
                                }
                            }}">人事/教职</th>
                <th lay-data="{toolbar:'#tools',align:'center',fixed:'right'}">操作</th>
            </tr>
            </thead>
        </table>
        <script type="text/html" id="tools">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" >删除</a>
        </script>
        </div>
    </div>
</div>
</body>
</html>
